import React, {Component} from 'react';
import styles from './index.less';
import classNames from 'classnames';
import {
  Modal,
  Button
} from 'antd';

/*
*
*  此组件 的 footer 如果不是特殊情况尽量不要传 或者传一个(传一个：详情框)
*
*
*
* */
export default class ModalComponent extends Component {
  constructor(props) {

    //const style = this.props.style;

    super(props);
  }
  render() {
    let {children ,footer ,className, title } =this.props;
    const classContent = classNames(styles.modal, {
      [className]: className,
    })
    const titleContent = () => {
      if (typeof(title) === 'string'){
          return (
            <div className={styles.header}>
              <span className={styles.headerIcon} />
              {title}
            </div>
          )
      }else {
        return title
      }
    }
    const buttomContent = ()=>{
      const content = [];
      let onSubmit;
      let onBack;
      if (this.props.footer && this.props.footer.length === 1 ){
        if (this.props.footer[0].props.onClick) {
          onSubmit = this.props.footer[0].props.onClick
        }else {
          console.error("components.custom.antd.modal 34: 必须为footer 添加点击事件")
        }
        content.push(
            <div  key={"model-footer-other"} align="right"  style={{marginRight : 12}}>
            <Button type="primary" style={{width : 80,height : 35,borderRadius : 2}} onClick = {onSubmit}>
              {
                this.props.footer[0].props.children ?   this.props.footer[0].props.children : '确定'
              }
            </Button>
          </div>
        )
      }else if (this.props.footer && this.props.footer.length > 2) {
        return this.props.footer
      }else {
        if (this.props.onOk && this.props.onCancel) {
          onSubmit = this.props.onOk;
          onBack=  this.props.onCancel
        }else {
          console.error("components.custom.antd.modal 50 : 必须为footer 添加点击事件")
        }
        content.push(
            <div key={"model-footer-main"} align="right"  style={{marginRight : 12}}>
            <Button style={{width : 80,height : 35,borderRadius : 2}} onClick = {onBack}>
              取消
            </Button>
            <Button type="primary" style={{marginLeft : 15,width : 80,height : 35,borderRadius : 2}} onClick = {onSubmit}>
              提交
            </Button>
          </div>
        )
      }
      return content
    }
    return (
      <Modal
        {...this.props}
        footer = {buttomContent()}
        className = {classContent}
        title={titleContent()}
      >
        {children}
      </Modal>
    );
  }
}
ModalComponent.confirm = Modal.confirm;
ModalComponent.info = Modal.info;
ModalComponent.success = Modal.success;
ModalComponent.error = Modal.error;
ModalComponent.warning = Modal.warning;




